<template>
  <component
    :is="iconComponent"
    :class="classes"
    :style="{ width: size + 'px', height: size + 'px' }"
  />
</template>

<script>
export default {
  name: 'Icon',
  props: {
    name: {
      type: String,
      required: true,
    },
    size: {
      type: [String, Number],
      default: 24,
    },
    class: {
      type: String,
      default: '',
    },
  },
  computed: {
    iconComponent() {
      // 将图标名称转换为 Ant Design Vue 图标组件名
      const iconMap = {
        user: 'UserOutlined',
        robot: 'RobotOutlined',
        plus: 'PlusOutlined',
        trash: 'DeleteOutlined',
        send: 'SendOutlined',
        copy: 'CopyOutlined',
        refresh: 'ReloadOutlined',
        dashboard: 'DashboardOutlined',
        chat: 'MessageOutlined',
        'arrow-down': 'DownOutlined',
        eye: 'EyeOutlined',
        'eye-off': 'EyeInvisibleOutlined',
        'check-circle': 'CheckCircleOutlined',
        'x-circle': 'CloseCircleOutlined',
        'alert-triangle': 'ExclamationCircleOutlined',
        info: 'InfoCircleOutlined',
        bell: 'BellOutlined',
      }

      const iconName = iconMap[this.name] || this.name
      return iconName
    },
    classes() {
      return `inline-block ${this.class}`
    },
  },
}
</script>
